<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .update-ipt {
            display: none;
        }
    </style>
</head>

<body>
    <ul class="user-info">
        <li>
            用户名:<span></span> <input type="text" name="" id="" class="update-ipt">
        </li>
        <li>
            昵称:<span></span> <input type="text" name="" id="" class="update-ipt">
        </li>
        <li>
            性别:<span></span> <input type="text" name="" id="" class="update-ipt">
        </li>
        <li>
            年龄:<span></span> <input type="text" name="" id="" class="update-ipt">
        </li>
    </ul>
    <button id="updateBtn">修改</button>

    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
    <script src="./request.js"></script>
    <script>
        // 调用修改接口展示内容
        let userInfoAPI = '/users/info';
        let uid = localStorage.getItem('uid')
        http.get(userInfoAPI + '/' + uid).then(r => {
            console.log(r.data);
            let { info } = r.data;
            let userInfoSpanArr = document.querySelectorAll(".user-info span");
            // userInfoSpanArr[0].innerHTML = info.username;
            // userInfoSpanArr[1].innerHTML = info.nickname;
            // userInfoSpanArr[2].innerHTML = info.gender;
            // userInfoSpanArr[3].innerHTML = info.age;

            let str = `
            <li>
            用户名:<span>${info.username}</span> <input value="${info.username}" type="text" name="" id="" class="update-ipt">
            </li>
            <li>
                昵称:<span></span> <input type="text" name="" id="" class="update-ipt">
            </li>
            <li>
                性别:<span></span> <input type="text" name="" id="" class="update-ipt">
            </li>
            <li>
                年龄:<span></span> <input type="text" name="" id="" class="update-ipt">
            </li>
            `
            document.querySelector(".user-info").innerHTML = str;;

            // 编辑按钮-添加点击事件
            let updateBtn = document.querySelector("#updateBtn")
            updateBtn.onclick = function () {
                document.querySelectorAll(".user-info span").forEach(v => v.style.display = 'none')
                document.querySelectorAll(".user-info input").forEach(v => v.style.display = 'inline-block')

            }

        })

    </script>

</body>

</html>